import React from 'react'
// ===================================================================== Temp
import Controls from '#cpt/temp/Controls'
// ===================================================================== global declare
const { $Lazy } = window
// ===================================================================== private template
const Page = $Lazy.load(()=>import('#tp/page/page-container'))
const Tabs = $Lazy.load(()=>import('#tp/tabs/tabs'))
// ===================================================================== component
class Index extends React.Component{
	state = {
		index: 0,
		pages: [
			{ component:$Lazy.state(()=>import('./cpt/a')) },
			{ component:$Lazy.state(()=>import('./cpt/b')) }
		]
	}
	
	componentDidMount(){
		const { pages, index } = this.state
		pages[index].first = true
		this.setState({ pages })
	}
	
	tabs = [
		{ title:'大批量生成条码', status:0 },
		{ title:'大批量生成条码记录', status:1 }
	]
	
	// 操作按钮
	controls = () => [
		Controls.back.call(this)
	]
	
	render(){
		const { index, pages } = this.state
		return (
			<>
				<Page>
					{/* 选项卡 */}
					<Tabs
						data				= { this.tabs }
						defaultActiveKey 	= { index }
						onTabs 				= { (data, index) => {
							const _index = +index
							pages[_index].first = true
							this.setState({ index:_index, pages })
						}}
						controls	= { this.controls() }
					/>

					{
						pages.map((v,i)=> v.first && (
							<div className='ex rel fv' key={i} style={{ display: +index === i && v.first ? 'flex' : 'none' }}>
								<v.component onRef={ ref => this['ref' + i] = ref} />
							</div>
						))
					}
				</Page>
			</>
		)
	}
}

export default Index